<template>
  <view>
    <view class="ranking-tabs">
      <view
          class="tab-item"
          @click="switchTab(1)"
      >
        <text class="px-3 py-1 rounded20" :class="{ 'active': type === 1 }">年榜</text>
      </view>
      <view
          class="tab-item"
          @click="switchTab(2)"
      >
        <text class="px-3 py-1 rounded20" :class="{ 'active': type === 2 }">月榜</text>
      </view>
    </view>

    <!-- 排行榜内容 -->
    <scroll-view class="ranking-content" scroll-y
                 style="height: calc(100vh - 300rpx);"
                 :refresher-enabled="true"
                 :refresher-triggered="refreshing"
                 @refresherrefresh="onRefresh">
      <!-- 前三名特殊展示 -->
      <view class="top-three" v-if="rankList.length >= 3">
        <view class="second-place rank-item">
          <image :src="rankList[1].avatar" class="avatar"></image>
          <text class="username">{{ rankList[1].user_name }}</text>
          <text class="amount">￥{{ rankList[1].total_amount }}</text>
          <view class="medal second">2</view>
        </view>

        <view class="first-place rank-item">
          <image :src="rankList[0].avatar" class="avatar"></image>
          <text class="username">{{ rankList[0].user_name }}</text>
          <text class="amount">￥{{ rankList[0].total_amount }}</text>
          <view class="medal first">1</view>
        </view>

        <view class="third-place rank-item">
          <image :src="rankList[2].avatar" class="avatar"></image>
          <text class="username">{{ rankList[2].user_name }}</text>
          <text class="amount">￥{{ rankList[2].total_amount }}</text>
          <view class="medal third">3</view>
        </view>
      </view>

      <!-- 4名及以后列表 -->
      <view class="rank-list">
        <view
            class="rank-item-list"
            v-for="(item, index) in rankList.slice(3)"
            :key="item.user_id"
        >
          <view class="rank-number">{{ index + 4 }}</view>
          <image :src="item.avatar" class="avatar-small"></image>
          <view class="user-info">
            <text class="username">{{ item.user_name }}</text>
          </view>
          <text class="amount">￥{{ item.total_amount }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {
  mapState
} from "vuex"
import {
  fileApi,
} from "@/http/fileApi"

export default {
  data() {
    return {
      rankList: [],
      type: 1, // 1 年, 2 月
      refreshing: false
    }
  },
  computed: {
    ...mapState({
      loginState: state => state.loginState,
    })
  },
  onLoad() {
    this.initInviteList()
  },
  methods: {
    switchTab(tab) {
      this.type = tab;
      this.initInviteList(tab);
    },

    async initInviteList(type) {
      try {
        // 显示加载提示
        uni.showLoading({
          title: '加载中...'
        });

        let params = {
          type: type || 1
        };

        let res = await fileApi.getRichList(params);

        this.rankList = res;

        // 隐藏加载提示
        uni.hideLoading();
      } catch (error) {
        // 隐藏加载提示
        uni.hideLoading();

        uni.showToast({
          title: '获取排行榜失败',
          icon: 'none'
        });

        console.error('获取排行榜失败:', error);
      }
    },

    // 下拉刷新
    async onRefresh() {
      if (this.refreshing) return;

      this.refreshing = true;

      try {
        await this.initInviteList(this.type);

        uni.showToast({
          title: '刷新成功',
          icon: 'success'
        });
      } catch (error) {
        uni.showToast({
          title: '刷新失败',
          icon: 'none'
        });
      } finally {
        this.refreshing = false;
      }
    }
  }
}
</script>

<style scoped>
.ranking-page {
  min-height: 100vh;
  background: linear-gradient(to bottom, #fffaf0, #fff0f5);
  padding: 20rpx;
}

.ranking-tabs {
  display: flex;
  background: #ffffff;
  border-radius: 50rpx;
  padding: 10rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  border-radius: 50rpx;
  font-size: 30rpx;
  color: #666;
  transition: all 0.3s;
}

.tab-item .active {
  background: linear-gradient(45deg, #9e8d35, #7c621d);
  color: #fff;
  font-weight: bold;
  box-shadow: 0 4rpx 15rpx rgba(255, 215, 0, 0.4);
}

.top-three {
  display: flex;
  justify-content: space-around;
  margin-bottom: 50rpx;
  padding:0 20rpx;
  padding-top: 40rpx;
}

.rank-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.first-place {
  order: 2;
  transform: translateY(-20rpx);
  z-index: 10;
}

.second-place {
  order: 1;
  opacity: 0.9;
}

.third-place {
  order: 3;
  opacity: 0.9;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 6rpx solid #ffd700;
  margin-bottom: 15rpx;
  box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.1);
}

.avatar-small {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin: 0 20rpx;
}

.medal {
  position: absolute;
  top: -15rpx;
  right: -15rpx;
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 24rpx;
  box-shadow: 0 2rpx 5rpx rgba(0,0,0,0.2);
}

.medal.first {
  background: linear-gradient(-45deg,
  #ffd700,
  #978337
  );
  box-shadow: 0 0 15rpx rgba(255, 215, 0, 0.8);
  border: 2rpx solid #fff;
}


.medal.second {
  background: linear-gradient(45deg, #c0c0c0, #808080);
  box-shadow: 0 0 15rpx rgba(192, 192, 192, 0.8);
  border: 2rpx solid #fff;
}

.medal.third {
  background: linear-gradient(45deg, #cd7f32, #a0522d);
  box-shadow: 0 0 15rpx rgba(205, 127, 50, 0.8);
  border: 2rpx solid #fff;
}

.username {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  font-weight: 500;
  max-width: 150rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.amount {
  font-size: 28rpx;
  color: #ac7728;
  font-weight: bold;
}

.rank-list {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
  margin-top: 20rpx;
}

.rank-item-list {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.rank-item-list:last-child {
  border-bottom: none;
}

.rank-number {
  width: 60rpx;
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
  color: #999;
}

.user-info {
  flex: 1;
}

.my-ranking {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(45deg, #ffd700, #ffb700);
  padding: 20rpx;
  text-align: center;
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.1);
}

.my-rank-info {
  display: flex;
  justify-content: space-around;
  color: #8B0000;
  font-weight: bold;
  font-size: 28rpx;
}
</style>
